import * as React from 'react';
export function Tab({ label, isActive = false, onClick }) {
  return (
    <div className={`tab ${isActive ? 'active' : ''}`} onClick={onClick}>
      {label}
      <style jsx>{`
        .tab {
          font-size: 15px;
          line-height: 40px;
          height: 40px;
          min-width: 100px;
          width: auto;
          cursor: pointer;
          border-bottom: 2px solid transparent;
          color: #6b7384;
          text-align: center;
        }
        .tab:hover {
          color: black;
        }
        .tab.active {
          font-weight: 600;
          color: var(--color-geekblue-9);
          border-bottom-color: var(--color-geekblue-9);
        }
      `}</style>
    </div>
  );
}
